<%@ include file="../layout/taglib.jsp"%>

<div ng-app="dnd" class="content-top">
	<div class="aParent" ng-controller="dndCtrl"
		ng-init="init(${course_id})">


		<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
			<div class="row">
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<div id="add_unit" ng-click="showAdd()">
						<div class="ico">
							<img alt="Book"
								src="<%=request.getContextPath()%>/resources/images/front/Book.png">
							<span> + Unit</span>
						</div>
					</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<div id="add_test">
						<div class="ico">
							<img alt="add test"
								src="<%=request.getContextPath()%>/resources/images/front/holorge.jpg"><span>
								+ Test</span>
						</div>
					</div>
				</div>
			</div>

			<div ng-show="myvalue" class="hideByDefault">
				<input type="text" ng-model="widget1.title" name="title" /> <input
					type="hidden" ng-model="widget1.course_id" /> <input type="submit"
					value="Save" ng-click="save_title()" />

			</div>
			<div class="span4">
				<ul id="targetList" dnd-between-list="model,sourceList">
					<li class="relative_ alert alert-info nomargin" ng-repeat="item in model"ng-click="go(item)" style="cursor: pointer"ng-if="item.idCourse  == ${course_id}">
						<div class="ico">
						<img alt="Book"src="<%=request.getContextPath()%>/resources/images/front/Book.png"><span>{{item.title}}</span></div>
						<div class="glyphicon glyphicon-menu-hamburger"></div>
					</li>
				</ul>
			</div>

			<div class="span4 offset2">
				<ul id="sourceList" dnd-between-list="source,targetList">
					<li class="alert alert-error nomargin" ng-repeat="item in source"
						id="waste"><img alt="trash"
						src="<%=request.getContextPath()%>/resources/images/front/trash.jpg">
						{{item.value}}</li>
				</ul>
			</div>
		</div>


		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-7">
			<span><label>Unit</label> :</span> <span> </span>

			<div class="unit_detail">

				<div id="tabs">
					<ul>
						<li><a href="#tabs-1">Lecture</a></li>
						<li><a href="#tabs-2">Multi-choice Questions</a></li>
						<li><a href="#tabs-3">Essay Questions</a></li>
						<li><a href="#tabs-4">Listening/Speaking Question</a></li>
					</ul>
					<div id="tabs-1" class="tab_form">
						<p>
						<form action="" method="POST">
							<div class="form-group">
								<label for="title"><t:message code="title" /> :</label> <input
									id="title" type="text" name="title" ng-model="widget.title"
									class="form-control" />
							</div>
							<div class="form-group">
								<label for="description"><t:message code="description" />
									:</label> <input type="hidden" name="idUnit" ng-model="widget.idUnit" />
								<textarea path="description" ng-model="widget.description" name="description"
									id="description" class="form-control"></textarea>
							</div>
							<div class="form-group">
								<input type="hidden" ng-model="widget.idCourse" /> <label
									for="uri_youtube"><t:message code="video_link" /> :</label> <input
									type="text" name="uri_youtube" ng-model="widget.uri_youtube"
									width=200px id="uri_youtube" class="form-control" />
							</div>
							<div>
								<input type="submit" value="Save" ng-click="save()"
									class="btn btn-default" />
							</div>
							<p>{{ widget.message }}</p>
						</form>
						</p>
					</div>
					<div id="tabs-2" class="tab_form">
						<p>
						<form action="" method="POST">

							<div class="form-group">
								<input type="hidden" name="idUnit" ng-model="choice.idUnit" />
								<input type="hidden" name="qestId" ng-model="choice.qestId" />
								<label for="question"><t:message code="question" /> :</label> <input
									id="question" type="text" name="question"
									ng-model="choice.questContent" width="300px"
									class="form-control" />

							</div>
							<div class="form-group">
								<label for="choice1"><t:message code="choice1" /> :</label> <input
									type="text" name="choice1" ng-model="choice.collect1"
									width="300px" class="form-control" />

							</div>
							<div class="form-group">
								<label for="choice2"><t:message code="choice2" /> :</label> <input
									id="choice2" type="text" name="choice2"
									ng-model="choice.collect2" width="300px" class="form-control" />

							</div>
							<div class="form-group">
								<label for="choice3"><t:message code="choice3" /> :</label> <input
									id="choice3" type="text" name="choice3"
									ng-model="choice.collect3" width="300px" class="form-control" />

							</div>
							<div class="form-group">
								<label for="choice4"><t:message code="choice4" /> :</label> <input
									type="text" name="choice4" ng-model="choice.collect4"
									width="300px" class="form-control" id="choice4" />
							</div>
							<div class="form-group">
								<label for="answer"><t:message code="answer" /> :</label></span> <span>
									<select id="answer" name="answer" ng-model="choice.answer"
									class="form-control">
										<option value="0" label="--- Select ---" />
										<option value="1" label="Choice 1" />
										<option value="2" label="Choice 2" />
										<option value="3" label="Choice 3" />
										<option value="4" label="Choice 4" />
								</select>
								</span>
							</div>
							<input type="submit" value="Save" ng-click="save_choice()"
								class="btn btn-default" />
							<div>
								<p>{{ choice.message }}</p>
							</div>
						</form>

						<table id="table_choice">
							<tr>
								<th><t:message code="question" /></th>
								<th><t:message code="choice1" /></th>
								<th><t:message code="choice2" /></th>
								<th><t:message code="choice3" /></th>
								<th><t:message code="choice4" /></th>
								<th><t:message code="delete" /></th>
							</tr>


							<tr ng-repeat="ques in model1" ng-click="go_quest(ques)">
								<td width="165px">{{ques.questContent}}</td>
								<td>{{ques.collect1}}</td>
								<td>{{ques.collect2}}</td>
								<td>{{ques.collect3}}</td>
								<td>{{ques.collect4}}</td>
								<td><a href="#" ng-click="del_quest(ques)">Delete</a></td>
							</tr>


						</table>

						</p>
					</div>
					<div id="tabs-3">
						<p>Tab 3</p>
					</div>
					<div id="tabs-4">
						<p>Tab 4</p>
					</div>
				</div>

			</div>


		</div>

	</div>

	<!-- load all the scripts -->
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript"
		src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

	<script
		src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
	<script
		src="<%=request.getContextPath()%>/resources/lib/bootstrap/js/angular.js"
		type="text/javascript"></script>
	<script
		src="<%=request.getContextPath()%>/resources/lib/bootstrap/js/bootstrap.min.js"
		type="text/javascript"></script>

	<!-- load the app scripts -->
	<script
		src="<%=request.getContextPath()%>/resources/lib/angularjs/app.js"
		type="text/javascript"></script>
	<script
		src="<%=request.getContextPath()%>/resources/lib/angularjs/dir-dnd.js"
		type="text/javascript"></script>
	<script
		src="<%=request.getContextPath()%>/resources/lib/angularjs/ctrl-dnd.js"
		type="text/javascript"></script>
	<div class="clearfix"></div>
</div>